<template>
	<up-popup :show="show" :round="15" mode="center">
		<view class="switch-container">
			<view class="fs-32 my-50 bold">
				<text>该功能在</text>
				<!-- #ifdef H5 -->
				<text class="mx-5">网页端</text>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<text class="mx-5">微信小程序</text>
				<!-- #endif -->
				<!-- #ifdef APP -->
				<text class="mx-5">APP</text>
				<!-- #endif -->
				<text>暂不支持，请前往</text>
				<text class="color mx-5">{{platfrom}}</text>
				<text>使用</text>
			</view>
			<view @click="openTerminal" class="switch-btn">
				打开{{platfrom}}
			</view>
			
			<view @click="goBack" class="close-icon">
				<up-icon class="" name="close-circle" size="26" color="#999"></up-icon>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch
	} from 'vue'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useUserStore
	} from '@/store/user'
	import {
		getWxOpenLink
	} from '@/utils/request/api/index'
	/**
	 * 该组件用于弹窗提示用户前往指定终端使用
	 * @property {String}	terminal		要打开的终端
	 * @property {String}	path			要打开的终端的页面路径，可携带参数
	 * @property {String}	show			是否显示
	 */
	
	const appStore = useAppStore()
	const userStore = useUserStore()
	onMounted(()=>{
		console.log(openPath.value,'openPath')
	})
	const props = defineProps({
		terminal:{
			default:[
				'MP-WEIXIN',
				'H5',
				'APP'
			]
		},
		path:{
			default:''
		},
		show:{
			default:true
		}
	})
	const platfrom = computed(()=>{
		let platfrom_text = ''
		switch (props.terminal){
			case 'MP-WEIXIN':
				platfrom_text = '微信小程序端'
				break;
			case 'H5':
				platfrom_text = 'H5端'
				break;
			case 'APP':
				platfrom_text = 'APP端'
				break;
			default:
				break;
		}
		return platfrom_text
	})
	const openPath = computed(()=>{
		if(props.path){
			return props.path
		}else{
			let pages = getCurrentPages() // 获取栈实例
			let fullPath = pages[pages.length - 1].$page.fullPath // 获取当前全路径
			return fullPath
		}
	})
	const goBack = ()=>{
		uni.navigateBack()
	}
	const openTerminal = async()=>{
		switch (props.terminal){
			case 'MP-WEIXIN':
				const link = await getWxOpenLinkApi()
				// #ifdef H5
				window.location.href = link
				// #endif
				// #ifdef APP
				uni.navigateTo({
					url:`/pages/webview/switch_terminal?src=${link}`
				})
				// #endif
				break;
			case 'H5':
			
			
				break;
			case 'APP':
			
			
				break;
			default:
				break;
		}
	}
	const getWxOpenLinkApi = async()=>{
		const path = openPath.value.split('?')[0]
		const query = openPath.value.split('?')[1]
		const res = await getWxOpenLink({
			path: path,
			query: query
		})
		return Promise.resolve(res.url_link)
	}
</script>

<style lang="scss">
	.color{
		color: var(--color);
	}
	.switch-container{
		position: relative;
		background-color: #fff;
		width: 80vw;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 50rpx 60rpx;
	}
	
	.switch-btn{
		width: 100%;
		background-color: var(--color);
		color: #fff;
		border-radius: 100rpx;
		padding: 20rpx 0;
		font-size: 34rpx;
		text-align: center;
		letter-spacing: 4rpx;
	}
	
	.close-icon{
		position: absolute;
		bottom: -180rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}
</style>